<script setup lang="ts">
  interface TabBarItem {
    label: string;
    icon?: string;
  }

  defineProps<{ tabs: TabBarItem[] }>();
</script>

<template>
  <div class="umrp-tab-bar">
    <div v-for="(tab, index) in tabs" :key="index" class="umrp-tab-item">
      <umrp-text-icon>{{ tab.label }}</umrp-text-icon>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-tab-bar {
    z-index: 10;
    display: flex;
    width: 100vw;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  }

  .umrp-tab-item {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    flex: 1;
  }
</style>
